<template>
  <div>
    <el-table
      v-if="noResponse"
      v-loading="loading"
      style="width: 100%;height: 390px;margin: 10px auto;z-index: 1">
    </el-table>
    <el-empty v-if="isEmpty" :image-size="200"></el-empty>
    <div id="target">
      <div class="user-box" v-if="!isEmpty" v-for="(item,index) in contentData" :key="index">
        <div class="user-box-top">
          <router-link target="_blank" :to="{path:'/userHomePage', query:{ userId : item.userId }}">
            <div class="userInfo nicheng">
              <div style="margin-top: 8px; margin-right: 5px;">
                <img :src=item.userHeadPhotoPath width="26" style="border-radius: 50%">
<!--                <img :src=imageUrl[index] width="26" style="border-radius: 50%">-->
              </div>
              <div>{{item.userNickname}}</div>
            </div>
          </router-link>
          <a href="javascript:;" title="被举报次数">
            <div class="userInfo reportedCount">
              <strong>被举报次数:</strong>
              <span>{{item.reportedCount}}</span>
            </div>
          </a>
          <a href="javascript:;" title="码龄">
            <div class="userInfo codeAge">
              <strong>码龄(年):</strong>
              <span>{{item.codeAge}}</span>
            </div>
          </a>
          <a href="javascript:;" title="作品总数">
            <div class="userInfo worksCounts">
              <strong>总的作品数:</strong>
              <span>{{item.worksCounts}}</span>
            </div>
          </a>
          <a href="javascript:;" title="贡献值">
            <div class="userInfo contributionValue">
              <strong>贡献值:</strong>
              <span>{{item.attributeValue}}</span>
            </div>
          </a>
          <a href="javascript:;" title="操作">
            <div class="userInfo operation" @click="onclickOpt"><i class="iconfont icon-fabu"></i></div>
          </a>
        </div>
        <div class="user-box-middle middle">
          <el-form :inline="true" :model="formInline" class="demo-form-inline searchForm">
            <el-form-item label="操作类型">
              <el-select v-model="formInline.type" placeholder="请选择操作类型">
                <el-option label="禁 言" value="noSpeak" disabled></el-option>
                <el-option label="封 号" value="noLogin"></el-option>
                <el-option label="忽 略" value="ignore"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="操作时长">
              <el-select v-if="formInline.type == 'ignore'"
                         v-model="formInline.duration"
                         placeholder="请选择操作时长"
                         disabled >
              </el-select>
              <el-select v-else v-model="formInline.duration" placeholder="请选择操作时长">
                <el-option label="7 天" value="604800000"></el-option>
                <el-option label="15 天" value="1296000000"></el-option>
                <el-option label="30 天" value="2592000000"></el-option>
                <el-option label="150 天" value="12960000000" disabled></el-option>
                <el-option label="365 天" value="31536000000" disabled></el-option>
                <el-option label="永 久" value="315360000000" disabled></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit(item.userId)">操作</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="user-box-bottom">
          <div class="user-box-bottom-sub title">违规类型:</div>
          <div class="user-box-bottom-sub value">
            <!-- 将字符串根据',' 拆分成数组 -->
            <div class="label" v-for="(label,index) in item.reportedClassify.split(',')" :key="index">
              {{label}}
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        v-if="!isEmpty && !noResponse"
        background
        layout="prev, pager, next"
        :total=pageTotal
        @current-change="handleCurrentChange(currentPage)"
        :current-page.sync = currentPage
        class="page">
      </el-pagination>
    </div>
  </div>

</template>

<script>
    var counts = 0
    export default {
        name: "AdminErrorUser",
        data() {
            return {
                formInline: {
                    type: '',
                    duration: ''
                },
                centerDialogVisible: false,
                imageUrl:[],
                loading:"true",
                isEmpty:false,
                noResponse: true,
                baseURL:'http://localhost:8081/adminPage/getAdminUserManage/',
                baseURL2:'http://localhost:8081/adminPage/getPages/adminErrorUser',
                baseURL3:'http://localhost:8081/adminPage/handleErrorUser/',
                contentData:'',
                pageTotal:0,
                currentPage:1  // 当前页
            }
        },
        mounted(){
            this.$emit("component","errorUser")
            this.getUserErrorInfo()
            this.getPages()
        },
        methods:{
            getUserErrorInfo(){
                this.axios.post(this.baseURL + this.currentPage).then(res=>{
                    this.noResponse=false
                    if (res.data == false){
                        this.$message.error("服务器异常")
                    } else if (res.data == "empty") {
                        this.isEmpty = true
                    } else {
                        this.contentData = res.data
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            getPages(){
                this.axios.post(this.baseURL2).then(res=>{
                    this.pageTotal = res.data * 10
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            onSubmit(userID) {
                if (this.formInline.type == '' && this.formInline.duration == '') {
                    this.$message("请选择【操作类型】和【操作时长】")
                    return
                }else if (this.formInline.type != 'ignore' && this.formInline.duration == '') {
                    this.$message("请选择【操作时长】")
                    return
                } else if (this.formInline.type == '' && this.formInline.duration != ''){
                    this.$message("请选择【操作类型】")
                    return
                } else if (this.formInline.type == 'ignore') {
                    this.formInline.duration = '0'
                }

                this.axios.post(this.baseURL3 + userID + "/" + this.formInline.type+ "/" + this.formInline.duration).then(res=>{
                    if (res.data == true) {
                        this.successOpt("操作成功")
                        this.formInline.duration = ''
                        this.formInline.type = ''
                        this.getUserErrorInfo()
                    } else {
                        this.failOpt("操作失败")
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )

            },
            onclickOpt(){
                let middle = document.getElementsByClassName("middle")
                let operation = document.getElementsByClassName("operation")
                for(let i=0; i<middle.length; i++){
                    if(counts%2 == 0&&event.currentTarget == operation[i]){
                        middle[i].style.height="45px"
                        break
                    }else {
                        middle[i].style.height="0px"
                    }
                }
                counts++
            },
            handleCurrentChange(currentPage){
                this.axios.post(this.baseURL+currentPage).then(res=>{
                    this.noResponse=false
                    if (res.data != "empty"){
                        this.contentData = res.data
                        let target = document.getElementById("target").offsetTop
                        window.scrollTo({
                            top:target,
                            behavior: "smooth"
                        });
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            successOpt(message) {
                this.$notify({
                    title: '成功',
                    message: message,
                    type: 'success'
                })
            },
            failOpt(message) {
                this.$notify.error({
                    title: '错误',
                    message: message
                });
            }
        }
    }
</script>

<style scoped>
  .searchForm{
    margin: 170px;
    margin-top: 2px;
  }
  .user-box{
    width: 100%;
    min-height: 90px;
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
    margin-bottom: 10px;
    letter-spacing: 1px;
    transition: 0.3s;
  }
  .user-box:hover{
    box-shadow: 0 0 5px rgb(173, 173, 173);
    transform:translateY(-2px);
  }
  .user-box-top,.user-box-bottom{
    width: 100%;
    height: 45px;
  }
  .userInfo{
    float: left;
    width: 20%;
    height: 45px;
    line-height: 45px;
    text-align: left;
    font-size: 13px;
    color: rgb(110, 110, 110);

  }
  .nicheng div{
    float: left;
  }
  .nicheng{
    width: 25%;
    margin-left: 20px;

    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .reportedCount{
    width: 18%;
  }
  .codeAge{
    width: 13%;
  }
  .worksCounts{
    width: 18%;
    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .contributionValue{
    width: 18%;
  }
  .operation{
    width: 5%;
    text-align: center;

    /*background-color: tomato;*/
  }
  .operation i{
    font-size: 27px;
    color: rgb(213, 213, 213);
  }
  .operation:hover i{
    color: rgb(90, 181, 0);
    font-weight: bolder;
  }

  .user-box-middle{
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition: 0.3s;
    /*background-color: rgb(5, 152, 137);*/

  }
  .user-box-bottom{

  }
  .user-box-bottom-sub{
    height: 45px;
    float: left;
    line-height: 45px;

    /*background-color: tomato;*/
  }
  .user-box-bottom .title{
    min-width: 8%;
    margin-left: 20px;
    font-size: 15px;
    color: rgb(72, 72, 72);
  }
  .user-box-bottom .value{
    /* width: 80%; */

    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .user-box-bottom .value .label{
    float: left;
    min-width: 30px;
    height: 22px;
    margin-top: 13px;
    line-height: 22px;
    text-align: center;
    font-size: 10px;
    border-radius: 3px;
    margin-right: 15px;
    color: rgb(255, 255, 255);
    padding-left: 8px;
    padding-right: 8px;
    background-color: #d2d2d2;
  }
  .temp{
    float: left;
    width: 36.1%;
    height: 30px;
    /*background-color: #4d8e90;*/
  }

  .ignore{
    float: left;
    width: 5%;
    text-align: center;
    /*background-color: #b84733;*/
    margin-top: -2px;
  }
  .ignore i{
    color: rgb(213, 213, 213);
    font-size: 26px;
  }
  .ignore:hover i{
    color: rgb(211, 39, 39);
  }
  .page{
    margin: 10px auto;
    margin-left: -10px;
  }
</style>
